<!-- 门店订单 -->
<template>
	<view class="pages relative">
		<view class="msck" v-if="filterShow"></view>
		<!-- 顶部 -->
		<view class="pages-top bgc-w boxShadow">
			<!-- 顶部导航 -->
			<g-pages-tab class="pages-tab bgc-w" :list="pagesTab" :index='ptIndex' @change="changePagesTab"
				type="scroll" />
			<!-- 搜索框位置&&筛选按钮 -->
			<view class="pages-top-item row-box">
				<p-search style="height: 72rpx;flex: 1;" @onSearch='onSearch' />
				<view class="fcc ml-20" @click="openFilter">
					<image src="/static/images/common/icon-1.png" mode="scaleToFill" class="filter-icon"></image>
					<text class="fc-3 fs-sm">筛选</text>
				</view>
			</view>

			<!-- 筛选框下拉框 -->
			<view class="filter-popup-box static bgc-w p-20" v-if="filterShow">
				<view class="filter-popup-item relative  mt-20">
					<view class="fc-3 fw-6 mb-10">
						按时间选择
					</view>
					<p-time-tab mr='10rpx' :list="timeList" :index='timeIndex' type='grid' bgcolor='#F4F4F4'
						@changeTimeIndex="changeTimeIndex" @changeStartTime="changeStartTime"
						@changeEndTime="changeEndTime" />
				</view>
				<view class="row-box mt-20">
					<view class="btn-info " style="font-size: 28rpx;" @click="onCancel">
						清除
					</view>
					<view class="btn-ac " style="font-size: 28rpx;" @click="onConfirm">
						确定
					</view>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="pages-list-box relative pt-20" v-if="pagesLists&&pagesLists.length">
			<incomeItem v-for="(item,index) in pagesLists" :key="index" :info='item'></incomeItem>
		</view>
		<view class="pages-list-box relative" v-else>
			<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	import {
		apiGetStaffsEarn,
		apiApply,
		apiApplyLog,
		apiEarnList
	} from '@/api/commission.js'
	import incomeItem from './components/incomeItem.vue'
	export default {
		components: {
			incomeItem
		},
		data() {
			return {
				// 筛选框
				filterShow: false,
				// 筛选时间索引
				timeIndex: 0,
				// 筛选服务索引
				filterIndex: 0,
				// 门店订单状态索引
				stateIndex: 0,
				// 门店订单来源
				ptIndex: 0,
				//数据
				pagesLists: [],
				page_no: 1,
				// 1-累计收入;2-待入账
				commission_type: '',
				// 搜索
				search_name: "",
			};
		},
		onLoad(opts) {
			this.commission_type = opts.type
			this.resetList()
		},
		async onShow() {
			await this.$onLaunched;
		},
		onReachBottom() {
			this.page_no++
			this.getPageList()
		},
		onPullDownRefresh() {
			this.resetList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//发送请求
			async getPageList() {
				let res = await apiEarnList({
					page_no: this.page_no,
					page_size: 10,
					commission_type: this.commission_type,
					time_type: this.timeIndex,
					search_name: this.search_name,
					start_time: this.start_time,
					end_time: this.end_time,
					type: this.pagesTab[this.ptIndex].id
				})
				this.pagesLists.push(...res.list)
			},
			// 重置页码
			resetList() {
				this.pagesLists = []
				this.page_no = 1
				this.getPageList()
			},

			// 切换顶部导航索引
			changePagesTab(index) {
				this.ptIndex = index
				this.timeIndex = 0
				this.search_name = ''
				this.start_time = ''
				this.end_time = ''
				this.resetList()
			},
			// 确定
			onConfirm() {
				this.filterShow = false
				this.resetList()
			},
			// 打开筛选
			openFilter() {
				this.filterShow = !this.filterShow
				if (this.filterShow) {
					this.timeIndex = 0
					this.start_time = ''
					this.end_time = ''
				}
			},
			// 获取时间index
			changeTimeIndex(index) {
				this.timeIndex = index
			},
			// 获取搜索
			onSearch(text) {
				this.search_name = text
			},
			// 开始时间
			changeStartTime(time) {
				this.start_time = time
			},
			//结束时间
			changeEndTime(time) {
				this.end_time = time
			},
			// 关闭筛选
			onCancel() {
				this.filterShow = false
			},
			// 提醒使用
			onUse() {
				console.log('onUse', )
			},
			// 已到店
			inStore() {
				console.log('inStore', )
			},
			// 去详情
			onDetails(val) {
				console.log('onDetails')
				this.$fn.toPages(`/pages/order/details?id=${0}`)
			},
			// 核销
			verification() {
				console.log('verification', )
				this.$fn.toPages(`/pages/verification/verificationGoods?id=${0}`)
			},
			// 到店核销
			storeVerification() {
				console.log('storeVerification', )
				this.$fn.toPages(`/pages/verification/verificationCoupon?id=${0}`)

			},
		},
		computed: {
			timeList() {
				return [{
					title: '全部'
				}, {
					title: '今日'
				}, {
					title: '昨日'
				}, {
					title: '本周'
				}, {
					title: '本月'
				}, {
					title: '近半年'
				}, {
					title: '近一年'
				}, {
					title: '自定义'
				}, ]
			},
			pagesTab() {
				// 分佣类型:0-全部;450群收益;451导购收益,452核销收益;453分享1级收益;454分享2级收益,不传默认全部
				return [{
						title: '全部收益',
						id: '0'
					},
					{
						title: '导购群收益',
						id: '450'
					}, {
						title: '导购专属',
						id: '451'
					}, {
						title: '直营店导购核销',
						id: '452'
					}, {
						title: '导购分享1级',
						id: '453'
					},
					{
						title: '导购分享2级',
						id: '454'
					},
					{
						title: '群加人佣金',
						id: '501'
					},
					{
						title: '群总人数佣金',
						id: '502'
					},
					{
						title: '群净增长佣金',
						id: '503'
					},
				]
			},
			stateList() {
				return [{
					title: '全部',
				}, {
					title: '待配送'
				}, {
					title: '待核销/待自提'
				}, {
					title: '退款售后'
				}, ]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.static {
		position: static;
	}

	.pages-top {
		width: 750rpx;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		z-index: 3;

		.pages-top-item {
			height: 100rpx;
			margin: 0 auto;
		}

		.pages-tab {
			height: 96rpx;
		}
	}

	.filter-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.filter-popup-box {
		// position: relative;
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;

		.btn-info {
			width: 300rpx;
			line-height: 80rpx;
		}

		.btn-ac {
			width: 300rpx;
			line-height: 80rpx;
		}

	}


	.msck {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pages-list-box {
		z-index: 1;
	}
</style>